<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <title></title>
  
  <script type="text/javascript" src="scripts/local-storage-extensions.js"></script>	
	<script type="text/javascript" src="scripts/storage.js"></script>
	<script type="text/javascript" src="scripts/expenses.js"></script>
	<script type="text/javascript" src="scripts/accounts.js"></script>
	<script type="text/javascript" src="scripts/categories.js"></script>
    <script type="text/javascript" src="scripts/chart.js"></script>
  
  <link rel="stylesheet" href="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
  
  <!-- Extra Codiqa features -->
  <link rel="stylesheet" href="styles/codiqa.ext.css">
  
  <!-- jQuery and jQuery Mobile -->
  <script src="https://d10ajoocuyu32n.cloudfront.net/jquery-1.9.1.min.js"></script>
  <script src="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

  <!-- Extra Codiqa features -->
  <script src="https://d10ajoocuyu32n.cloudfront.net/codiqa.ext.js"></script>
   
</head>
<body>
<!-- Home -->
<div data-role="page" id="page1">
    <div data-theme="a" data-role="header">
        <a id="homeButton" data-role="button" href="#page1" data-icon="home" data-iconpos="left"
        class="ui-btn-left">
            Button
        </a>
        <h1>
            Budget chart
        </h1>
    </div>
    <div data-role="content">
        <div data-role="fieldcontain">
            <label for="selectmenu1">
                From month
            </label>
            <select id="selectmenu1" name="From month menu" data-mini="true">
                <option value="1">
                    Jan
                </option>
                <option value="2">
                    Feb
                </option>
                <option value="3">
                    Mar
                </option>
                <option value="4">
                    Apr
                </option>
                <option value="5">
                    May
                </option>
                <option value="6">
                    Jun
                </option>
                <option value="7">
                    Jul
                </option>
                <option value="8">
                    Aug
                </option>
                <option value="9">
                    Sept
                </option>
                <option value="10">
                    Oct
                </option>
                <option value="11">
                    Nov
                </option>
                <option value="12">
                    Dec
                </option>
            </select>
        </div>
        <div data-role="fieldcontain">
            <label for="selectmenu2">
                To month
            </label>
            <select id="selectmenu2" name="" data-mini="true">
                <option value="1">
                    Jan
                </option>
                <option value="2">
                    Feb
                </option>
                <option value="3">
                    Mar
                </option>
                <option value="4">
                    Apr
                </option>
                <option value="5">
                    May
                </option>
                <option value="6">
                    Jun
                </option>
                <option value="7">
                    Jul
                </option>
                <option value="8">
                    Aug
                </option>
                <option value="9">
                    Sept
                </option>
                <option value="10">
                    Oct
                </option>
                <option value="11">
                    Nov
                </option>
                <option value="12">
                    Dec
                </option>
            </select>
        </div>
        <div data-role="fieldcontain">
            <label for="selectmenu3">
                Year
            </label>
            <select id="selectmenu3" name="" data-mini="true">
                <option value="2013">
                    2013
                </option>
            </select>
        </div>
        <a id="draw-chart-button" data-role="button" href="#" data-icon="forward" data-iconpos="left">
            Show Chart
        </a>
    </div>
    <div data-theme="a" data-role="footer" data-position="fixed">
        <h1>
            Strawberry Team
        </h1>
    </div>
</div>
<script>
    $("#draw-chart-button").on('click', function () {
        $monthFrom = $("#selectmenu1").val();
        $monthTo = $("#selectmenu2").val();
        $year = $("#selectmenu3").val();
        location.href = "chart.html?"+$monthFrom+"&"+$monthTo+"&"+$year;        
	})

	$('#homeButton').on('click', function () {
	    location.href = 'index.html';
	})
</script>
</body>
</html>
